<template>
  <view class="record-item" @click="$emit('click')">
    <view class="item-left">
      <view class="method-icon" :class="methodClass">
        <image 
          v-if="record.method === 'alipay'" 
          src="/static/images/alipay.png" 
          mode="aspectFit"
        ></image>
        <image 
          v-else-if="record.method === 'bank'" 
          src="/static/images/bank.png" 
          mode="aspectFit"
        ></image>
      </view>
      <view class="item-info">
        <text class="method-name">{{ record.methodName }}</text>
        <text class="time">{{ formatTime(record.createTime) }}</text>
      </view>
    </view>
    <view class="item-right">
      <text class="amount">¥{{ record.amount }}</text>
      <text class="status" :class="statusClass">{{ statusText }}</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import { formatTime } from '@/utils/util.js'

const props = defineProps({
  record: {
    type: Object,
    required: true
  }
})

const statusText = computed(() => {
  const statusMap = {
    'processing': '处理中',
    'success': '提现成功',
    'failed': '提现失败'
  }
  return statusMap[props.record.status] || props.record.status
})

const statusClass = computed(() => {
  return props.record.status
})

const methodClass = computed(() => {
  return props.record.method
})
</script>

<style lang="scss" scoped>

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    
    .method-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      
      &.alipay {
        background-color: #1777FF;
      }
      
      &.bank {
        background-color: $primary-color;
      }
      
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    
    .item-info {
      display: flex;
      flex-direction: column;
      
      .method-name {
        font-size: $font-size-28rpx;
        color: $text-color;
        margin-bottom: 8rpx;
      }
      
      .time {
        font-size: $font-size-24rpx;
        color: $text-color-666;
      }
    }
  }
  
  .item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .amount {
      font-size: $font-size-30rpx;
      font-weight: bold;
      color: $text-color;
      margin-bottom: 8rpx;
    }
    
    .status {
      font-size: $font-size-24rpx;
      
      &.processing {
        color: #FF9800;
      }
      
      &.success {
        color: #4CAF50;
      }
      
      &.failed {
        color: #F44336;
      }
    }
  }
}
</style>